package com.jf.demo.composeapp.ui.view

import androidx.annotation.DrawableRes
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jf.demo.composeapp.ui.theme.ComposeAppTheme

/**
 * @Class: CommonView
 * @Description:
 * @author:
 * @Date: 2022/7/14
 */
@Composable
fun TabItem(modifier: Modifier, @DrawableRes iconId: Int, tabName: String, tint: Color) {
    Column(
        modifier = modifier.padding(vertical = 8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(
            painter = painterResource(id = iconId),
            contentDescription = tabName,
            modifier = Modifier.size(24.dp),
            tint = tint
        )
        Text(text = tabName, fontSize = 12.sp, color = tint)
    }
}

@Composable
fun TabItem(modifier: Modifier, iconId: ImageVector, tabName: String, tint: Color) {
    Column(
        modifier = modifier.padding(vertical = 8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(
            imageVector = iconId,
            contentDescription = tabName,
            modifier = Modifier.size(24.dp),
            tint = tint
        )
        Text(text = tabName, fontSize = 12.sp, color = tint)
    }
}

@Composable
fun MyContent(
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    content: @Composable (PaddingValues) -> Unit
) {
    ComposeAppTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Scaffold(
                modifier = Modifier.fillMaxSize(),
                topBar = topBar,
                bottomBar = bottomBar,
                content = content
            )
        }
    }
}

@Composable
fun MyTopBar(onMenuClicked: () -> Unit) {
    TopAppBar(
        title = { Text("Home") },
        navigationIcon = {
            Icon(
                imageVector = Icons.Default.Menu,
                contentDescription = "Menu",
                modifier = Modifier.clickable(onClick = onMenuClicked)
            )
        },
        elevation = 12.dp,
    )
}

@Composable
fun MyTopBarCenter(
    title: String,
    menuIcon: ImageVector? = Icons.Default.ArrowBack,
    onMenuClicked: (() -> Unit)? = null,
    rightIcon: ImageVector? = null,
    onRightClicked: (() -> Unit)? = null,
) {
    TopAppBar(
        elevation = 12.dp
    ) {
        menuIcon?.let {
            IconButton(
                onClick = onMenuClicked ?: {},
                enabled = true,
                modifier = Modifier.size(56.dp)
            ) {
                Icon(
                    imageVector = it,
                    contentDescription = "back"
                )
            }
        }
        Text(
            text = title,
            modifier = Modifier.weight(1f),
            textAlign = TextAlign.Center,
            fontWeight = FontWeight.Bold
        )
        if(rightIcon != null){
            IconButton(
                onClick = onRightClicked ?: { /*TODO*/ },
                enabled = true,
                modifier = Modifier.size(56.dp)
            ) {
                Icon(
                    imageVector = rightIcon,
                    contentDescription = "menu"
                )
            }
        }else{
            Box(modifier = Modifier.size(56.dp))
        }
    }
}
